import React, { Component } from 'react';
// import 'antd/dist/antd.css'
// import { Input,Button,List  } from 'antd'
// ui和逻辑层分离
import TodoListUI from './TodoListUI'
import { CHANGE_INPUT , ADD_ITEM , DELETE_ITEM } from './store/actionTypes'
import {getMyListAction,getTodoList,changeInputAction , addItemAction ,deleteItemAction,getListAction} from './store/actionCreators'
//  目前ToDoList组件里有很多Action派发，并且分散才程序的各个地方 分离一个actionCreators文件
// 可以在要使用的组件中，先引入store  import store from './store'
import store from './store/index'
import Axios from 'axios';
const data=[
    '早8点开晨会，分配今天的开发工作',
    '早9点和项目经理作开发需求讨论会',
    '晚5:30对今日代码进行review'
]
// Ant Design制作了todoList的界面
class TodoList extends Component {
    constructor(props) {
        super(props);
        // 取到仓库的值（对象）赋值到本地数据池
        this.state = store.getState()
        this.changeInputValue= this.changeInputValue.bind(this)
        // 只要onchanges=》tore数据更新=》检测store数据变化组件数据也应该更新，但是现在他检测不了store数据变化，
        // 需要订阅Redux的状态
        this.storeChange=this.storeChange.bind(this)
        // 可以注销更新，unsubscriobe.
        store.subscribe(this.storeChange)
        console.log(this.state)
          //增加按钮开始增加数据实现store和组件的同步更新   
        this.clickBtn=this.clickBtn.bind(this)
        this.deleteItem=this.deleteItem.bind(this)
    }
    componentDidMount(){
        // zgl 123456
        // Axios.get('https://www.fastmock.site/mock/759b4f73684cd7a5b5eb36794a121be8/fastmock/api/first/login').then((res)=>{
        //     console.log(res)
        //     const data=res.data
        //     // 获取列表数据 action={type:***,value:''data},把这个对象传到store
        //     const action = getListAction(data)
        //     store.dispatch(action)
        // })
        // const action = getTodoList()
        // console.log(action)//是一个函数内容，把函数结构传到store
        // 执行函数
        // store.dispatch(action)
        const action = getMyListAction()
        store.dispatch(action)
        console.log(action)
    }
    render() { 
        // 只要检测到this.state就会执行render
        console.log(this.state)
        return ( 
            // ui和业务实现分离，改变TodoListUI.js里边的属性了，也就是父子两个组件的整合【通过属性传值的形式，把需要的值传递给子组件，子组件接收这些值，进行相应的绑定就可以了】
            <TodoListUI 
               inputValue={this.state.inputValue}
               list={this.state.list}
               changeInputValue={this.changeInputValue}
               clickBtn={this.clickBtn}
               deleteItem={this.deleteItem}
            />
        //     <div style={{margin:'10px'}}>
        //     <div>
        //         <Input placeholder='Write something' style={{ width:'250px', marginRight:'10px'}} onChange={this.changeInputValue} value={this.state.inputValue}/>
        //         <Button type="primary" onClick={this.clickBtn}>增加</Button>
        //     </div>
        //     <div style={{margin:'10px',width:'300px'}}>
        //             <List
        //                 bordered
        //                 dataSource={this.state.list}
        //                 renderItem={(item,index)=>(<List.Item onClick={this.deleteItem.bind(this,index)}>{item}</List.Item>)}
        //             />    
        //         </div>
        // </div>
         );
    }
    changeInputValue(e){
        console.log(e.target.value)
        // action统一管理操作，TodoList.js文件里的所有action都改为直接调用方法的模式
        // const action = {
        //     type:CHANGE_INPUT,
        //     value:e.target.value
        // }
        const action = changeInputAction(e.target.value)
        // const action='123456',//Action就是一个对象，这个对象一般有两个属性，第一个是对Action的描述，第二个是要改变的值。
        // 要通过dispatch()方法增加的新数据传递给store，store
        //store数据只能传递，不能直接操作数据 更新state
       store.dispatch(action)

    }
    storeChange(){
        // 实现redux和组件同步更新
        this.setState(store.getState())
    }
    clickBtn(){
        console.log('jspang.com增加数据开始')
        // const action = {type:ADD_ITEM }
        const action = addItemAction()
        // 传递到数据仓库store
        store.dispatch(action)
    }
    deleteItem(index){
         console.log(index)
        //  const action={
        //      type:DELETE_ITEM,
        //      index
        //  }
        const action = deleteItemAction(index)

         store.dispatch(action)
    }
}
 
export default TodoList;